<template>
  <f7-page>
    <f7-navbar :title="$t('m.v1')" back-link=" "></f7-navbar>
    <div class="content-padding">
      <div class="schedule-box">
        <p>{{$t('m.v2')}}</p>
        <div>
          <van-steps :active="active" inactive-icon="passed">
            <van-step>{{$t('m.v3')}}</van-step>
            <van-step>{{$t('m.v4')}}</van-step>
            <van-step>{{$t('m.v5')}}</van-step>
          </van-steps>
        </div>
      </div>
      <p class="tips-p">{{$t('m.v6')}}</p>

      <div class="upload-box">
        <!--<div class="file-position margin-b20">
          <div v-if="!formItems.cardshou">
            <p>{{$t('m.v7')}}</p>
            <p>{{$t('m.v8')}}</p>
          </div>
          <div v-else class="show-img-box">
            <img :src="formItems.cardshou" alt="">
          </div>
          <input type="file" @change="uploadImg($event, 1)">
        </div>-->
        <div class="file-position margin-b20">
          <div v-if="!formItems.cardzheng">
            <p>{{$t('m.v9')}}</p>
            <p>{{$t('m.v8')}}</p>
          </div>
          <div v-else class="show-img-box">
            <img :src="formItems.cardzheng" alt="">
          </div>
          <input type="file" @change="uploadImg($event, 2)">
        </div>
        <div class="file-position">
          <div v-if="!formItems.cardfan">
            <p>{{$t('m.v10')}}</p>
            <p>{{$t('m.v8')}}</p>
          </div>
          <div v-else class="show-img-box">
            <img :src="formItems.cardfan" alt="">
          </div>
          <input type="file" @change="uploadImg($event, 3)">
        </div>
      </div>
      <div class="real-name-box">
        <custom-input :placeholder="$t('m.v11')" v-model="formItems.name"></custom-input>
        <custom-input :placeholder="$t('m.v12')" v-model="formItems.cardnum"></custom-input>
      </div>

      <f7-button fill color="blue" large @click="handleSubmit">{{$t('m.sure')}}</f7-button>
    </div>
  </f7-page>
</template>

<script>
  import { uploadImage } from "../api";
  import { updateAudit } from "../api/my";

  export default {
    name: "verified",
    data () {
      return {
        active: Number(this.$store.getters.userInfo.user.audit),
        formItems: {
          name: '', // 真实姓名
          cardnum: '', // 证件号码
          cardzheng: '', // 正面照
          cardfan: '', // 反面照
          cardshou: '' // 手持照
        }
      }
    },
    methods: {
      uploadImg (e, type) {
        const file = e.target.files[0];
        const render = new FileReader();
        render.readAsDataURL(file);
        render.onload = (res) => {
          uploadImage({image: res.target.result}).then(res => {
            if(type === 1) {
              this.formItems.cardshou = res.url.url;
            } else if(type === 2) {
              this.formItems.cardzheng = res.url.url;
            } else {
              this.formItems.cardfan = res.url.url;
            }
            e.value = '';
          })
        }
      },
      handleSubmit() {
        updateAudit(this.formItems).then(() => this.$f7router.back());
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    padding: $padding20 $padding;
  }
  .schedule-box {
    background: #fff;
    padding: 30px;
    >div {
      padding-top: 30px;
    }
    .van-step--finish {
      color: rgb(7, 193, 96);
    }
  }
  .tips-p {
    color: $colorGrey;
    padding: $padding;
    font-size: 20px;
  }

  .real-name-box {
    margin: $padding 0;
    .custom-input {
      margin-bottom: $padding20;
    }
  }
</style>
